<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08.浮动</title>
    <style>
        /*
        margin 左右都设置auto 表示块元素在容器中居中
        浮动：
         float:left/right
        清除浮动
         clear:left/right/both

        浮动特性:
           1. 浮动的元素必须要有一个非body的父盒子包裹
           2. 要变为一行的元素都要添加浮动
           3. 浮动的元素都会脱离文档流

           4. 如果存在浮动 一定要及时清除浮动
        */
        .p {
            width: 1000px;
            border: 10px solid;
            margin: 0 auto;
        }
        .a,.b,.c {
            width: 200px;
            height: 200px;
        }
        .a {
            background-color: red;
          
             float:right;
             float:left;
        }
        .b {
            background-color: green;
       
            float:right;
            float:left;
        }
        .c {
            background-color: yellow;
           
            float:right;
            float:left;
        }

        .box {
            height: 300px;
            background-color: gray;
        }
    </style>
</head>

<body>

    <div class="p">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <!-- 清除浮动 额外标签 必须是非行级元素 -->
        <div style="clear: both;"></div>
    </div>

    <div class="box"></div>


</body>

</html>